<template>
  <div style="display: flex; height: 100%">
    <div style="width: 100%; overflow-x: auto">
      <el-card
        v-for="(item, index) in rowsData"
        :key="index"
        class="info-card"
        shadow="hover"
      >
        <div class="card-content">
          <div class="card-header">
            <span class="username">{{ item.username }}</span>
            <span class="report-time">{{ item.reportime }}</span>
          </div>
          <el-divider></el-divider>
          <div class="info-grid">
            <div class="info-item content-item">
              <span class="label">发布内容：</span>
              <span style="text-align: center" class="value">{{
                item.reportContent
              }}</span>
            </div>
            <div class="positioning-grid">
              <div
                :class="{
                  'info-item-red': computedFn(),
                  'info-item-green': !computedFn(),
                }"
                class="info-item"
              >
                <span class="label">家庭住址经纬度：</span>
                <span style="text-align: center" class="value">{{
                  `经度：${baseInfo.userHomeLon} 纬度：${baseInfo.userHomeLat}` ||
                  "暂无数据"
                }}</span>
              </div>
              <div
                :class="{
                  'info-item-red': computedFn2(),
                  'info-item-green': !computedFn2(),
                }"
                class="info-item"
              >
                <span class="label">工作地址经纬度：</span>
                <span style="text-align: center" class="value">{{
                  `经度：${baseInfo.userWorkLon} 纬度：${baseInfo.userWorkLat}` ||
                  "暂无数据"
                }}</span>
              </div>
              <div class="info-item">
                <span class="labels">融合预警结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <!-- 融合定位结果是四个结果的和 -->
                      <tr>
                        <td>1</td>
                        <td>{{ one.lat }}</td>
                        <td>{{ one.lon }}</td>
                        <td>{{ one.distance1 }}千米</td>
                        <td>{{ one.distance2 }}千米</td>
                      </tr>
                      <tr v-for="(item, index) in two" :key="index">
                        <td>{{ index + 2 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                      <tr v-for="(item, index) in three" :key="index">
                        <td>{{ index + two.length + 2 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                      <tr v-for="(item, index) in four" :key="index">
                        <td>{{ index + two.length + three.length + 2 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                      <tr v-for="(item, index) in five" :key="index">
                        <td>{{ index + two.length + three.length + four.length + 2 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                      <!-- 上述数量如果没有20个随机从three抽出4个 -->
                       <template v-if="4 < two.length + three.length + four.length + five.length < 20">
                        <tr v-for="(item, index) in three.slice(0, 4)" :key="index">
                          <td>{{ index + two.length + three.length + four.length + five.length + 2 }}</td>
                          <td>{{ item.lat }}</td>
                          <td>{{ item.lon }}</td>
                          <td>{{ item.distance1 }}千米</td>
                          <td>{{ item.distance2 }}千米</td>
                        </tr>
                       </template>
                      

                    </table>
                  </div>
                </span>
              </div>
              <div class="info-item">
                <span class="label">文本定位结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>{{ one.lat }}</td>
                        <td>{{ one.lon }}</td>
                        <td>{{ one.distance1 }}千米</td>
                        <td>{{ one.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
              <div class="info-item">
                <span class="label">图像地理定位结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <tr v-for="(item, index) in two" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
              <div class="info-item">
                <span class="label">图像街景定位结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <tr v-for="(item, index) in three" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
              <div class="info-item">
                <span class="label">社交关系定位结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>

                      <tr v-for="(item, index) in four" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
              <div class="info-item">
                <span class="label">视频定位结果：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>

                      <tr v-for="(item, index) in five" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
            </div>
            <!-- 主流定位方法 -->
            <el-row>
                <el-col :span="12">
                  <span style="font-size: large;color: black;font-weight: 500;">主流定位方法</span>
                </el-col>
              </el-row>
            <div class="positioning-grid">
              <div class="info-item">
                <span class="label">基于用户发布内容的定位：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>{{ one.lat }}</td>
                        <td>{{ one.lon }}</td>
                        <td>{{ one.distance1 }}千米</td>
                        <td>{{ one.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>

              <div class="info-item">
                <span class="label">基于用户社交关系的定位：</span>
                <span style="text-align: center" class="value">
                  <div class="table-container">
                    <table class="location-table">
                      <tr>
                        <th>序号</th>
                        <th>纬度</th>
                        <th>经度</th>
                        <th>距离家庭地址</th>
                        <th>距离工作地址</th>
                      </tr>
                      <tr v-for="(item, index) in six" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.lat }}</td>
                        <td>{{ item.lon }}</td>
                        <td>{{ item.distance1 }}千米</td>
                        <td>{{ item.distance2 }}千米</td>
                      </tr>
                    </table>
                  </div>
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { detailsUser2 } from "@/api/combatUser/importantUser";

export default {
  props: {
    baseInfo: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      rowsData: [],
      baseInfo: {},
      distance1: 0,
      distance2: 0,
      one: {},
      two: [],
      three: [],
      four: [],
      five: [],
      six:[]
    };
  },
  watch: {},
  components: {},
  computed: {},
  mounted() {
    this.baseInfo = this.baseInfo;
    this.id = this.$route.query.id;
    this.userId = this.$route.query.userId;

    this.searchData();
  },
  methods: {
    computedFn() {
      if (this.one.distance1 < 30 && this.one.distance1 > 0) {
        return true;
      } else {
        //遍历图像地理定位算法
        let flag = false;
        this.two.map((item) => {
          if (item.distance1 < 30 && item.distance1 > 0) {
            flag = true;
          }
        });
        if (flag) {
          return true;
        } else {
          //遍历图像街景定位算法
          let flag2 = false;
          this.three.map((item) => {
            if (item.distance1 < 30 && item.distance1 > 0) {
              flag2 = true;
            }
          });
          if (flag2) {
            return true;
          } else {
            //遍历社交关系定位算法
            let flag3 = false;
            this.four.map((item) => {
              if (item.distance1 < 30 && item.distance1 > 0) {
                flag3 = true;
              }
            });
            if (flag3) {
              return true;
            } else {
              return false;
            }
          }
        }
      }
    },
    computedFn2() {
      if (this.one.distance2 < 30 && this.one.distance2 > 0) {
        return true;
      } else {
        //遍历图像地理定位算法
        let flag = false;
        this.two.map((item) => {
          if (item.distance2 < 30 && item.distance2 > 0) {
            flag = true;
          }
        });
        if (flag) {
          return true;
        } else {
          //遍历图像街景定位算法
          let flag2 = false;
          this.three.map((item) => {
            if (item.distance2 < 30 && item.distance2 > 0) {
              flag2 = true;
            }
          });
          if (flag2) {
            return true;
          } else {
            //遍历社交关系定位算法
            let flag3 = false;
            this.four.map((item) => {
              if (item.distance2 < 30 && item.distance2 > 0) {
                flag3 = true;
              }
            });
            if (flag3) {
              return true;
            } else {
              return false;
            }
          }
        }
      }
    },
    imageHanderFn(imageList) {
      if (imageList) {
        return imageList.split(",");
      } else {
        return [];
      }
    },
    searchData() {
      this.loading = true;
      //根据id查询数据
      let params = {
        userId: this.userId,
        pageSize: 1,
        pageNum: 1,
      };
      detailsUser2(params).then((res) => {
        this.rowsData = res.rows;
        //计算两个经纬度之间的距离
        this.computeDistance();
      });
    },
    computeDistance() {
      console.log("this.rowsData", this.rowsData);
      //计算两个经纬度之间的距离 分别计算文本定位算法到家庭经纬度和到工作经纬度之间的距离
      if (this.rowsData.length > 0 && this.rowsData[0].textAddress) {
        let data = JSON.parse(this.rowsData[0].textAddress);
        let distance1 = this.getDistance(
          this.baseInfo.userHomeLat,
          this.baseInfo.userHomeLon,
          data[0].lat,
          data[0].lng
        );
        let distance2 = this.getDistance(
          this.baseInfo.userWorkLat,
          this.baseInfo.userWorkLon,
          data[0].lat,
          data[0].lng
        );
        this.one = {
          lat: data[0].lat,
          lon: data[0].lng,
          distance1: distance1,
          distance2: distance2,
          type: "文本定位算法到家庭经纬度之间的距离",
        };
      }
      //图像地理定位算法
      if (this.rowsData.length > 0 && this.rowsData[0].imageAddress1) {
        let data1 = JSON.parse(this.rowsData[0].imageAddress1).gps || [];
        data1.map((item) => {
          //  ['113.80005525142666', '34.813147840795295']
          let lat = item[1];
          let lon = item[0];
          let distance1 = this.getDistance(
            this.baseInfo.userHomeLat,
            this.baseInfo.userHomeLon,
            lat,
            lon
          );
          let distance2 = this.getDistance(
            this.baseInfo.userWorkLat,
            this.baseInfo.userWorkLon,
            lat,
            lon
          );
          this.two.push({
            lat: lat,
            lon: lon,
            distance1: distance1,
            distance2: distance2,
            type: "图像地理定位算法到家庭经纬度之间的距离",
          });
        });
      }

      //图像街景定位算法

      if (this.rowsData.length > 0 && this.rowsData[0].imageAddress2) {
        let data2 = JSON.parse(this.rowsData[0].imageAddress2).gps || [];
        data2.map((item) => {
          //  ['113.80005525142666', '34.813147840795295']
          let lat = item[1];
          let lon = item[0];
          let distance1 = this.getDistance(
            this.baseInfo.userHomeLat,
            this.baseInfo.userHomeLon,
            lat,
            lon
          );
          let distance2 = this.getDistance(
            this.baseInfo.userWorkLat,
            this.baseInfo.userWorkLon,
            lat,
            lon
          );
          this.three.push({
            lat: lat,
            lon: lon,
            distance1: distance1,
            distance2: distance2,
            type: "图像街景定位算法到家庭经纬度之间的距离",
          });
        });
      }
      //社交关系定位算法 数据在this.baseInfo.socialAddress
      if (this.baseInfo.socialAddress) {
        let data3 = JSON.parse(this.baseInfo.socialAddress);
        let resdata = data3[0].predicted_city?.coordinates;
        let lat = resdata[0];
        let lon = resdata[1];
        let distance1 = this.getDistance(
          this.baseInfo.userHomeLat,
          this.baseInfo.userHomeLon,
          lat,
          lon
        );
        let distance2 = this.getDistance(
          this.baseInfo.userWorkLat,
          this.baseInfo.userWorkLon,
          lat,
          lon
        );
        this.four.push({
          lat: lat,
          lon: lon,
          distance1: distance1,
          distance2: distance2,
          type: "社交关系定位算法到家庭经纬度之间的距离",
        });
      }
      //社交关系抗定位算法 数据在this.baseInfo.afterAddress
      if (this.baseInfo.afterAddress) {
        let data6 = JSON.parse(this.baseInfo.afterAddress);
        let resdata = data6[0].predicted_city?.coordinates;
        let lat = resdata[0];
        let lon = resdata[1];
        let distance1 = this.getDistance(
          this.baseInfo.userHomeLat,
          this.baseInfo.userHomeLon,
          lat,
          lon
        );
        let distance2 = this.getDistance(
          this.baseInfo.userWorkLat,
          this.baseInfo.userWorkLon,
          lat,
          lon
        );
        this.six.push({
          lat: lat,
          lon: lon,
          distance1: distance1,
          distance2: distance2,
          type: "社交关系抗定位算法到家庭经纬度之间的距离",
        });
      }
      //视频定位算法
      if (this.rowsData.length > 0 && this.rowsData[0].videoAddress) {
        let data4 = JSON.parse(this.rowsData[0].videoAddress);
        let lat = data4.lat;
        let lon = data4.lon;
        let distance1 = this.getDistance(
          this.baseInfo.userHomeLat,
          this.baseInfo.userHomeLon,
          lat,
          lon
        );
        let distance2 = this.getDistance(
          this.baseInfo.userWorkLat,
          this.baseInfo.userWorkLon,
          lat,
          lon
        );
        this.five.push({
          lat: lat,
          lon: lon,
          distance1: distance1,
          distance2: distance2,
          type: "视频定位算法到家庭经纬度之间的距离",
        });
      }

      //之后进行融合算法的调用
    },
    getDistance(lat1, lon1, lat2, lon2) {
      // 地球半径（千米）
      const R = 6371;

      // 将角度转换为弧度
      const dLat = this.deg2rad(lat2 - lat1);
      const dLon = this.deg2rad(lon2 - lon1);

      // Haversine公式计算
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(this.deg2rad(lat1)) *
          Math.cos(this.deg2rad(lat2)) *
          Math.sin(dLon / 2) *
          Math.sin(dLon / 2);

      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

      // 计算距离
      const distance = R * c;
      return Number(distance.toFixed(2));
    },
    deg2rad(deg) {
      return deg * (Math.PI / 180);
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.searchData();
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
      this.searchData();
    },
  },
};
</script>

<style scoped>
.info-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0;
}

.username {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.report-time {
  color: #7f8c8d;
  font-size: 14px;
  background: #f5f6fa;
  padding: 4px 12px;
  border-radius: 15px;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

.content-item {
  width: 100%;
}

.positioning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: linear-gradient(145deg, #ffffff, #f5f6fa);
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.info-item:hover {
  background: linear-gradient(145deg, #f5f6fa, #ffffff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.label {
  font-weight: 600;
  color: #34495e;
  font-size: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.labels {
  font-weight: 700;
  color: #3321ef;
  font-size: 18px;
  padding-bottom: 4px;
}
.value {
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
  padding: 4px 0;
}

.info-item-red {
  background: linear-gradient(145deg, #fff5f5, #ffe3e3);
  border: 1px solid rgba(255, 0, 0, 0.1);
}

.info-item-red .label {
  color: #c0392b;
}

.info-item-red .value {
  color: #e74c3c;
}

.info-item-red:hover {
  background: linear-gradient(145deg, #ffe3e3, #fff5f5);
  box-shadow: 0 4px 8px rgba(231, 76, 60, 0.1);
}

.info-item-green {
  background: linear-gradient(145deg, #e3ffe3, #e3ffe3);
  border: 1px solid rgba(0, 255, 0, 0.1);
}

.info-item-green .label {
  color: #27ae60;
}

.el-divider {
  margin: 16px 0;
  background-color: rgba(0, 0, 0, 0.05);
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

/* 添加响应式调整 */
@media screen and (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .username {
    font-size: 18px;
  }
}

.location-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-track {
  background: #f5f7fa;
}

.location-table th,
.location-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #e0e0e0;
  white-space: nowrap;
}

.location-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.location-table tr:hover {
  background-color: #f5f7fa;
}
</style>
